<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 3px solid black;
            overflow: auto;

        }
    </style>
    <div>
        我不羡慕太阳照不亮你过往，有些黑暗我们都一样。我太嫉妒时光能离开得大方，不用开口也就无需躲藏。
        有一种悲伤,是你的名字停留在我的过往,陪伴我呼吸,决定我微笑模样,无法遗忘。
        有一种悲伤,是笑着与你分开,思念却背对背张望,剩下倔强,剩下合照一张。Oh~Oh~,成为彼此的路，多向往，怎会失去方向。
        有一种悲伤,Oh~留在我过往,无法遗忘,Oh~
        有一种悲伤，是你义无反顾，让爱成为我身上的光，给我温暖，却不准我遗忘。有一种悲伤，不想要与你分开，思念才背对背张望，你是所有，你是合照一张 。
    </div>
    <script>
        let div = document.querySelector('div');
        div.addEventListener(scroll, function () {
            console.log(d1v.scrollTop, div.scrollHeight);//滚动条滚动的距离:scrollTop,滚动条的总高度: scrollHeight

        });
    </script>
</body>

</html>